body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  background-image: url("https://api.boxmoe.com/random.php");
}

/* 拟态玻璃 check */
.glass-morphism {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  width: 60vw; 
  height: 80vh; 
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px; 
  flex-direction: column; 
}

/* 居中容器 */
.check {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute; 
  top: 56%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  height: 100vh; 
}

/* 优化标题样式 */
.title {
  font-size: 2vw; /* 使用 vw 单位实现响应式字体 */
  font-weight: bold;
  position: absolute; 
  top: 10%; 
  left: 50%; 
  transform: translate(-50%, -50%); /* 调整为水平居中 */
  height: auto; 
  max-height: 90vh; 
  width: auto; 
  padding: 2rem; /* 使用更大的内边距确保美观 */
  box-sizing: border-box; 
}

/* 拟态玻璃 title */
.title-morphism {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  width: 80vw; 
  max-width: 600px; 
  height: auto; 
  padding: 1rem; 
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px; 
  box-sizing: border-box; 
}

.choice_hero_title, .gameAreaService_title {
  font-size: 4vh; /* 适应性字体 */
  margin: 5vh 0 2vh;
  font-weight: bold; 
  position: relative; 
}

.choice_hero, .gameAreaService {
  display: flex;
  justify-content: center; 
  align-items: center; 
  position: relative; 
  margin: 0 20px; /* 边距大于0以适应屏幕 */
}

/* 微调位置 */
.choice_hero_title {
  top: -20vh; /* 根据需要调整 */
  left: -20vw; 
}

.choice_hero {
  top: -20vh; 
  left: -20vw;
}

.gameAreaService_title {
  top: -36.3vh; /* 根据需要调整 */
  left: 0; 
}

.gameAreaService {
  top: -36.3vh; 
  left: 0; 
}

.search {
  position: absolute; 
  top: 15%; 
  left: 75%;
}


.button {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); /* 渐变背景 */
  color: rgba(255, 255, 255, 0.9); /* 微透明白色字体 */
  border: none; /* 去掉边框 */
  border-radius: 12px; /* 圆润的边角 */
  padding: 14px 28px; /* 增加内边距 */
  font-size: 18px; /* 较大字体 */
  font-weight: 600; /* 突出字体 */
  text-transform: uppercase; /* 字母大写 */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); /* 深阴影 */
  transition: all 0.3s ease; /* 全部过渡效果 */
  backdrop-filter: blur(10px); /* 背景模糊效果 */
  cursor: pointer; /* 增加手势光标 */
  letter-spacing: 1px; /* 字母间距 */
}

.button:hover {
  background: rgba(255, 255, 255, 0.2); /* 悬停时背景透明度增加 */
  transform: translateY(-4px); /* 提升按钮 */
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.6); /* 悬停时阴影增强 */
}

.button:focus {
  outline: none; /* 去掉焦点样式 */
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.8); /* 金色光晕 */
}

.button:active {
  transform: translateY(1px); /* 点击时轻微下沉 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); /* 点击时阴影减轻 */
}


.result-container {
  position: relative; /* 设置相对定位 */
}

.result {
  position: absolute; /* 设置绝对定位 */
  top: -340px; /* 距离顶部的距离 */
  right: -250px; /* 距离右侧的距离 */
  width: 40vw; /* 结果框宽度 */
  height: 50vh;
  z-index: 1000; /* 确保它在上层 */
  margin-top: 20px; /* 与其他内容留出一些间距 */
  padding: 20px; 
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9); /* 背景色 */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 加阴影 */
}
